<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script>
        // // 模拟 data
        // let data = {
        //     msg: 'hello'
        // }
        // // 模拟 vue 实例
        // let vm = {}
        // // 数据劫持，当访问或者设置 vm 中的成员时做一些干预操作
        // Object.defineProperty(vm, 'msg', {
        //     // 可枚举、可遍历
        //     enumerable: true,
        //     // 可配置 (可以使用 delete 删除，可以通过 defineProperty 重新定义)
        //     configurable: true,
        //     // 获取值时执行
        //     get () {
        //         console.log('get',data.msg)
        //         return data.msg
        //     },
        //     // 设置时执行
        //     set (newVal) {
        //         console.log('set',newVal)
        //         if (newVal === data.msg) {
        //             return
        //         }
        //         data.msg = newVal
        //         // 数据更改，更新 DOM 的值
        //         document.querySelector('#app').textContent = newVal
        //     }
        // });

        // vm.msg = 'Hello'
        // console.log(vm.msg)

        // 模拟 data
        let data = {
            msg: 'hello',
            name: 'tom',
            count: 10
        }
        // 模拟 vue 实例
        let vm = {}

        proxyData(data)
        function proxyData(data) {
            Object.keys(data).forEach(key => {
                Object.defineProperty(vm, key, {
                    enumerable: true,
                    configurable: true,
                    get () {
                        console.log('get', key, data[key])
                        return data[key]
                    },
                    set (newVal) {
                        console.log('set', key, newVal)
                        if (newVal === data[key]) {
                            return
                        }
                        data[key] = newVal
                    }
                })
            })
        }

        vm.msg = 'Hello'
        console.log(vm.msg)
    </script>
</body>
</html>